<script>
import QSGDrawer from "@/components/QSGDrawer/index.vue";
import {addOrUpdateProject, robotInstanceList} from "@/api/aihuman/IntelligentInteraction/IntelligentInteraction";
import {deleteAimeta, getList, humanDetail} from '@/api/aihuman/humanConfig/config'

export default {
  name: "AddProject",
  components: {QSGDrawer},
  props: {
    title: {
      type:String,
      default: '新增项目'
    }
  },
  data() {
    //检验声音id
    var checkType = (rule, value, callback) => {
      // var inputType = /[^\w]/g
      var inputReg = /[a-zA-Z0-9-_]/g;
      if (!inputReg.test(value)) {
        callback(new Error('声音id由数字、英文、短划线、下划线组成'))
      } else {
        callback()
      }
    };
    return {
      type: 'add',
      robots: [],
      aimetaList: [],
      deviceList: [
        {
          label: '电脑端',
          value: 2
        },
        {
          label: '大屏端',
          value: 1
        },
        {
          label: '手机端',
          value: 3
        }
      ],
      humanTypes: [
        {
          label: 'Web3D数字人',
          value: 3
        },
        {
          label: 'UE3D数字人',
          value: 4
        },
        {
          label: '2D数字人',
          value: 2
        },
      ],
      humanTypeList: [
        {
          label: 'Web3D',
          value: 3
        },
        {
          label: 'UE3D',
          value: 4
        }
      ],
      formStatus: 'add',
      showDrawer: false,
      loading: false,
      form: {
        projectType: 2,
        projectName: '',
        applyType: 2,
        dimensionType: 3,
        // aimetaType: '',
        // robotInstanceId: '',
        // aimetaId: '',
        // aimeta: '',
        // ueInstanceIds: '',
        // ueStreamUrl: ''
      },
      rules: {
        projectName: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          },
          {min: 1, max: 30, message: '长度不可超过30个字符', trigger: 'blur'}
        ],
        soundTypeCode: [
          {required: true, message: '请输入声音id', trigger: 'blur'},
          {min: 1, max: 50, message: '长度不可超过50个字符', trigger: 'blur'},
          {required: true, validator: checkType, trigger: 'blur'}
        ],
        robotInstanceId: [
          {required: true, message: '请选择机器人实例', trigger: 'change'}
        ],
        aimeta: [{required: true, message: '请选择数字人', trigger: 'change'}]
      }
    }
  },
  methods: {
    getAimetaList(val) {
      getList({
        pageNo: 1,
        pageSize: 1000,
        inEditor: true,
        dimensionType: val
      }).then(res => {
        this.aimetaList = res.data.data.records

        this.$set(this.form, 'aimeta', res.data.data.records[0])
        // this.form.aimeta = res.data.data.records[0]
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      })
    },
    getRobotList() {
      robotInstanceList({
        "botId": JSON.parse(localStorage.getItem('HuilanAiHuman-currentTenantId')).content,
        "type": "1",
        "businessType": "1575852595577102337",
        "current": 1,
        "size": 100,
        "robotName": "",
      }).then(res => {
        this.robots = res.data.data.records
      })
    },
    initForm() {
      this.form = {
        projectType: 2,
        projectName: '',
        applyType: 2,
        dimensionType: 3,
        // aimetaType: '',
        // robotInstanceId: '',
        // aimetaId: '',
        // aimeta: '',
        // ueInstanceIds: '',
        // ueStreamUrl: ''
      }
      // this.$nextTick(() => {
      //   this.getAimetaList(this.form.dimensionType)
      // })
    },
    open(data = {}, type = 'add') {
      this.showDrawer = true;
      this.type = type;
      this.getRobotList();
      if (type === 'preview') {
        this.title = '基本信息'
        this.form = {...data}
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })

        // this.getAimetaList(data.dimensionType)
        // humanDetail(data.aimetaId).then(res => {
        //   console.log(res.data);
        //   this.form = {...data}
        //   this.form.aimeta = {
        //     aimetaName: res.data.data.aimetaName,
        //     id: res.data.data.id
        //   }
        //
        // })
      } else if (type === 'add') {
        this.title = '新增项目'
        this.initForm()
      } else {
        this.title = '编辑项目'

        this.form = {...data}
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })

        // this.getAimetaList(data.dimensionType)
        // humanDetail(data.aimetaId).then(res => {
        //   console.log(res.data);
        //   this.form = {...data}
        //   this.form.aimeta = {
        //     aimetaName: res.data.data.aimetaName,
        //     id: res.data.data.id
        //   }
        //
        // })
      }
    },
    closeDawer() {
      this.showDrawer = false
    },
    changeDimensionType(val) {
      this.form.aimeta = ''
      this.form.aimetaType = ''
      this.getAimetaList(val)
    },
    changeAimeta(val) {
      this.form.aimetaId = val.id
      this.form.aimetaType = val.aimetaType
    },
    submitData() {
      this.loading = true
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          try {
            const {data} = await addOrUpdateProject(this.form)
            this.$message.success(data.msg)
            this.loading = false
            this.showDrawer = false
            this.$emit('save')
          } catch (e) {
            console.log(e);
            this.loading = false
          }

        } else {
          console.log('error submit!!');
          this.loading = false
          return false;
        }
      });
    }
  }
}
</script>

<template>
  <q-s-g-drawer
    ref="drawer"
    :visible.sync="showDrawer"
    size="40%"
    :title="title"
  >

    <el-form ref="form" :disabled="this.type === 'preview'" :model="form" :rules="rules" label-width="100px"
             size="small" style="padding-right: 30px;">
      <el-form-item v-if="this.type === 'preview'" label="项目id:">
        {{ form.id }}
      </el-form-item>
      <el-form-item label="项目名称:" prop="projectName">
        <el-input v-model="form.projectName"></el-input>
      </el-form-item>

<!--      <el-form-item label="机器人实例:" prop="robotInstanceId">
        <el-select v-model="form.robotInstanceId" placeholder="请选择" style="width: 100%;"
                   filterable
                   :disabled="type === 'edit'">
          <el-option
            v-for="item in robots"
            :key="item.id"
            :label="item.robotName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item label="数字人:" prop="dimensionType">
        <el-radio-group v-model="form.dimensionType" @change="changeDimensionType" :disabled="type === 'edit'">
          <el-radio v-for="item in humanTypes" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
<!--      <el-form-item label="数字人:" prop="aimeta">
        <el-select v-model="form.aimeta" placeholder="请选择" style="width: 100%;" value-key="id"
                   @change="changeAimeta"
                   :disabled="type === 'edit'"
        >
          <el-option
            v-for="item in aimetaList"
            :key="item.id"
            :label="item.aimetaName"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>-->
      <!--      <el-form-item v-if="form.dimensionType === 3" label="类型:" prop="aimetaType">
              <el-radio-group v-model="form.aimetaType" disabled>
                <el-radio
                  v-for="item in humanTypeList"
                  :key="item.value"
                  :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>-->
      <!--      <template v-if="form.aimetaType === '2'">

              <el-form-item label="ue实例id">
                <el-input v-model="form.ueInstanceIds"></el-input>
              </el-form-item>
              <el-form-item label="ue流地址">
                <el-input v-model="form.ueStreamUrl"></el-input>
              </el-form-item>
            </template>-->
      <el-form-item label="应用端:" prop="applyType">
        <el-radio-group v-model="form.applyType" :disabled="type === 'edit'">
          <el-radio v-for="item in form.dimensionType === 4? deviceList.slice(0,2) : deviceList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button
        v-if="type === 'preview'"
        type="primary"
        icon="el-icon-circle-close"
        size="small"
        :loading="loading"
        @click="closeDawer"
      >关 闭
      </el-button>
      <template v-else>

        <el-button
          v-if="formStatus !== 'preview'"
          type="primary"
          icon="el-icon-circle-plus-outline"
          size="small"
          :loading="loading"
          @click="submitData"
        >保 存
        </el-button>
        <el-button
          type="default"
          icon="el-icon-circle-close"
          size="small"
          :loading="loading"
          @click="closeDawer"
        >{{ formStatus === 'preview' ? '关 闭' : '取 消' }}
        </el-button>
      </template>

    </template>
  </q-s-g-drawer>
</template>

<style scoped lang="scss">
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
